<template>
    <div class="player">
        <van-row type="flex" class="nav" justify="space-between">
            <van-col span="2" @click="close()">
                <van-icon size="0.5rem" name="arrow-down" />
            </van-col>
            <van-col span="2">
                <img
                    @click="shareMusic(playList[currentIndex]._id)"
                    src="~assets/imgs/global/share.svg"
                    alt=""
                />
            </van-col>
        </van-row>
        <p>{{ playList[currentIndex].name }}</p>
        <p>{{ playList[currentIndex].artist }}</p>
        <div class="cd">
            <div
                class="pic"
                :style="{
                    backgroundImage: `url(${playList[currentIndex].pic_url})`,
                }"
            ></div>
        </div>
        <div class="content">
            <div class="like">
                <img
                    v-if="musiclikes.includes(playList[currentIndex]._id)"
                    @click="disLike()"
                    src="~assets/imgs/global/like.svg"
                />
                <img
                    v-else
                    @click="store()"
                    src="~assets/imgs/global/unlike.svg"
                />
            </div>
            <div class="lyric" id="lyric">
                <ul class="lyric_content">
                    <li
                        @click="moveTo(index)"
                        :class="index === lyricIndex ? 'poetry' : ''"
                        v-for="(item, index) in lyricArr"
                        :key="index"
                    >
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="set">
                <img src="~assets/imgs/global/setting.svg" alt="" />
            </div>
        </div>
        <div class="pbox">
            <canvas class="progress_line" id="progress"> </canvas>
        </div>
        <div class="tools">
            <div class="pre">
                <img
                    @click="previous()"
                    src="~assets/imgs/global/previous.svg"
                    alt=""
                />
            </div>
            <div class="pause">
                <img
                    v-show="isPlay"
                    @click="pause()"
                    src="~assets/imgs/global/start.svg"
                />
                <img
                    v-show="!isPlay"
                    @click="play()"
                    src="~assets/imgs/global/pause.svg"
                />
            </div>
            <div class="next">
                <img
                    @click="next()"
                    src="~assets/imgs/global/next.svg"
                    alt=""
                />
            </div>
        </div>
    </div>
</template>

<script>
import { initCanvas, progress } from "assets/js/canvas.js";
import { mapState } from "vuex";
export default {
    name: "Player",
    data() {
        return {
            like: false,
        };
    },
    methods: {
        close() {
            this.$parent.player = false;
        },
        pause() {
            this.$store.commit("pause");
        },
        play() {
            this.$store.commit("start", this.currentIndex);
        },
        async next() {
            if (this.currentIndex === this.playList.length - 1) {
                await this.$store.dispatch("musicInit", 0);
            } else {
                await this.$store.dispatch("musicInit", this.currentIndex + 1);
                progress();
            }
        },
        async previous() {
            if (this.currentIndex === 0) {
                await this.$store.dispatch(
                    "musicInit",
                    this.playList.length - 1
                );
            } else {
                await this.$store.dispatch("musicInit", this.currentIndex - 1);
                progress();
            }
        },
        moveTo(index) {
            this.$store.commit("moveTo", index);
            return false;
        },
        shareMusic(id) {
            this.$emit("shareMusic", id);
        },
        //保存喜爱的歌曲
        async store() {
            if (!this.login) {
                this.$notify({ type: "warning", message: "请先登录" });
                this.player = false;
                this.$router.push("/signin");
                return;
            }
            let id = this.playList[this.currentIndex]._id;
            console.log(id, "likeid");
            await this.$store.dispatch("store", id);
            await this.$store.dispatch("readMsg");
        },
        //取消喜爱
        async disLike() {
            let id = this.playList[this.currentIndex]._id;
            console.log(id, "unlikeid");
            await this.$store.dispatch("disLike", id);
            await this.$store.dispatch("readMsg");
        },
    },
    //绘制进度条canvas
    mounted() {
        initCanvas();
        window.onresize = () => {
            initCanvas();
        };
    },
    watch: {
        scrollTop(val) {
            document.getElementById("lyric").scrollTop = val;
        },
    },
    computed: mapState([
        "playList",
        "login",
        "currentIndex",
        "isPlay",
        "lyricArr",
        "musiclikes",
        "lyricIndex",
        "scrollTop",
    ]),
};
</script>

<style lang="less" scoped>
.player {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    margin: 0 auto;
    z-index: 99;
    line-height: 0.5rem;
    font-size: 0.3rem;
    background-color: #f3f3f2;
    .nav {
        height: 0.5rem;
        margin: 0.2rem 0.2rem 1rem;
    }
    .cd {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid black;
        margin: 0.2rem auto;
        box-shadow: 1px 1px 0.1rem black inset;
        .pic {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 50%;
            margin: 0.2rem;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            border: 1px solid black;
            animation: roucir 10s linear infinite;
            // box-shadow: 1px 1px 0.1rem black;
        }
    }
    .content {
        width: 70%;
        height: 3rem;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .like {
            z-index: 999;
        }
        .lyric {
            height: 80%;
            width: 80%;
            overflow: scroll;
            position: relative;
            font-size: 0.3rem;
            font-weight: 300;
            z-index: 9;
            .lyric_content {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                padding: 0.1rem;
                line-height: 0.37rem;
                transition-duration: 0.2s;
                li {
                    overflow: hidden;
                    margin-bottom: 0.1rem;
                    height: 0.84rem;
                    width: 100%;
                    opacity: 0.5;
                }
                .poetry {
                    opacity: 1;
                    font-weight: bold;
                    font-size: 0.35rem;
                    transition-duration: 0.2s;
                }
            }
        }

        img {
            display: block;
            width: 0.6rem;
        }
    }
    .pbox {
        position: relative;
        width: 100%;
        height: 1rem;
        margin-top: -0.6rem;
        .progress_line {
            width: 100vw;
            height: 100vw;
            transform: scale(1.5);
            position: relative;
            left: 0;
            right: 0;
            bottom: 15vw;
            opacity: 0.5;
        }
    }
    .tools {
        z-index: 9;
        width: 75%;
        height: 1.5rem;
        margin: 1rem auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .pause {
            align-self: flex-end;
        }
        img {
            display: block;
            width: 0.8rem;
        }
    }
}
</style>
